<template>
  <div class="slow-sales-page">
    <!-- 页面标题 + 返回按钮 -->
    <div class="page-header">
      <h2 class="title">滞销产品排行</h2>
      <el-button type="default" class="return-btn" @click="handleReturn">返回</el-button>
    </div>

    <!-- 搜索栏 -->
    <div class="search-area">
      <el-input 
        v-model="searchKey" 
        placeholder="请输入产品名称/编号" 
        class="search-input"
      />
      <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
    </div>

    <!-- 数据表格（已移除所有width属性） -->
    <el-table 
      :data="tableData" 
      border 
      class="sales-table"
      size="small"
      style="width: 100%"
    >
      <el-table-column prop="rank" label="排名" align="center" />
      <el-table-column prop="slowCount" label="滞销数" align="center" />
      <el-table-column prop="productCode" label="产品编号" />
      <el-table-column prop="productName" label="产品名称" />
      <el-table-column prop="brand" label="归属品牌" />
      <el-table-column prop="spec" label="规格" align="center" />
      <el-table-column prop="type" label="类型" align="center" />
      <el-table-column prop="retailPrice" label="零售价" align="right" />
      <el-table-column prop="discount" label="折扣" align="center" />
      <el-table-column prop="discountPrice" label="折扣价" align="right" />
      <el-table-column prop="specialPrice" label="特价" align="right" />
      <el-table-column prop="flashPrice" label="秒杀价" align="right" />
      <el-table-column prop="warehouse" label="仓库" align="center" />
      <el-table-column prop="stock" label="库存" align="right" />
      <el-table-column prop="storageDate" label="入库日期" align="center" />
      <el-table-column prop="validDays" label="有效期" align="center" />
      <el-table-column label="状态" align="center">
        <template #default="scope">
          <el-switch 
            v-model="scope.row.status" 
            active-text="ON" 
            inactive-text="OFF"
            active-color="#4ecdc4"
            inactive-color="#dcdfe6"
            @change="handleStatusChange(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页栏 -->
    <div class="pagination-area">
      <span class="total-text">共 10 条 共 10 页</span>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10]"
        :total="10"
        layout="prev, pager, next"
        @current-change="handlePageChange"
        background
      />
      <span class="page-size-select">
        <el-select v-model="pageSize" @change="handleSizeChange">
          <el-option label="10条/页" value="10" />
        </el-select>
      </span>
      <span class="jump-area">
        跳至
        <el-input v-model="jumpPage" class="jump-input" />
        页
        <el-button type="primary"   class="jump-btn" @click="handleJump">确定</el-button>
      </span>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 搜索关键词
const searchKey = ref('');
// 分页状态
const currentPage = ref(1);
const pageSize = ref(10);
const jumpPage = ref(1);

// 表格数据
const tableData = ref([
  {
    rank: 1,
    slowCount: 50,
    productCode: 'mc8801',
    productName: '丝芙兰',
    brand: '丝芙兰精华眼霜',
    spec: '10ml',
    type: '套盒',
    retailPrice: '¥111.62',
    discount: 1.0,
    discountPrice: '¥123.98',
    specialPrice: '¥123.98',
    flashPrice: '¥111.62',
    warehouse: '1号',
    stock: 65426,
    storageDate: '2022.8.29',
    validDays: '355天',
    status: false
  },
  {
    rank: 2,
    slowCount: 40,
    productCode: 'mc8610',
    productName: '丝芙兰',
    brand: '丝芙兰精华液',
    spec: '10ml',
    type: '套盒',
    retailPrice: '¥111.62',
    discount: 1.0,
    discountPrice: '¥123.98',
    specialPrice: '¥123.98',
    flashPrice: '¥111.62',
    warehouse: '1号',
    stock: 65426,
    storageDate: '2022.8.29',
    validDays: '355天',
    status: false
  },
  {
    rank: 3,
    slowCount: 30,
    productCode: 'mc861',
    productName: '丝芙兰',
    brand: '丝芙兰洗手液',
    spec: '10ml',
    type: '套盒',
    retailPrice: '¥111.62',
    discount: 1.0,
    discountPrice: '¥123.98',
    specialPrice: '¥123.98',
    flashPrice: '¥111.62',
    warehouse: '1号',
    stock: 65426,
    storageDate: '2022.8.29',
    validDays: '355天',
    status: false
  }
]);

// 返回按钮事件
const handleReturn = () => {
  console.log('点击返回');
};

// 搜索事件
const handleSearch = () => {
  console.log('搜索关键词：', searchKey.value);
};

// 状态开关切换事件
const handleStatusChange = (row) => {
  console.log(`产品${row.productCode}状态切换为：${row.status ? 'ON' : 'OFF'}`);
};

// 分页切换事件
const handlePageChange = (page) => {
  currentPage.value = page;
  jumpPage.value = page;
  console.log('切换到第', page, '页');
};

// 每页条数切换事件
const handleSizeChange = (size) => {
  pageSize.value = size;
  currentPage.value = 1;
  jumpPage.value = 1;
  console.log('每页显示', size, '条');
};

// 跳页事件
const handleJump = () => {
  const page = Number(jumpPage.value);
  if (page >= 1 && page <= 10) {
    currentPage.value = page;
    console.log('跳转到第', page, '页');
  }
};
</script>

<style scoped>
/* 页面基础样式 */
.slow-sales-page {
  padding: 20px;
  font-family: "Microsoft Yahei", sans-serif;
  background: #fff;
}

/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.title {
  font-size: 18px;
  color: #333;
  font-weight: 700;
  margin: 0;
}
.return-btn {
  border-radius: 4px;
  padding: 6px 12px;
}

/* 搜索栏 */
.search-area {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.search-input {
  width: 150px;
  height: 32px;
}
.search-btn {
  background-color: #4ecdc4;
  border-color: #4ecdc4;
  height: 32px;
  padding: 0 15px;
}

/* 表格样式 */
.sales-table {
  --el-table-header-text-color: #333;
  --el-table-body-text-color: #666;
  --el-table-border-color: #e0e0e0;
  margin-bottom: 20px;
}
.sales-table th,
.sales-table td {
  padding: 8px 12px; /* 增加内边距让内容更舒展 */
  font-size: 14px;
}

/* 分页栏样式 */
.pagination-area {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 14px;
  color: #666;
}
.total-text {
  margin-right: 5px;
}
.page-size-select .el-select {
  width: 80px;
}
.jump-area {
  display: flex;
  align-items: center;
  gap: 5px;
}
.jump-input {
  width: 50px;
  height: 32px;
}
.jump-btn {
  background-color: #4ecdc4;
  border-color: #4ecdc4;
  padding: 4px 10px;
}
/* 分页按钮激活态 */
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #4ecdc4;
  color: #fff;
}
</style>